function init() {
    var target = document.getElementById('target');
    var oMove = document.getElementById('move');

    target.appendChild(createGraph('十级阶梯缓动函数', tenStepsEasing));

    target.appendChild(document.createElement('br'))

    for(var i = 0; i < 4; i += 1) {
        var numSteps = (i + 1) * 4;
        target.appendChild(createGraph(numSteps + '级阶梯缓动函数', createStepsFunction(numSteps)));
    }

    target.appendChild(document.createElement('br'));

    target.appendChild(createGraph('随机缓动', randomEasing));

    target.appendChild(createGraph('不规则的缓动函数', createNoisyEasing(0.1, TWEEN.Easing.Exponential.InOut)));
    target.appendChild(createGraph('不规则的缓动函数', createNoisyEasing(0.1, TWEEN.Easing.Cubic.InOut)));
    target.appendChild(createGraph('不规则的缓动函数', createNoisyEasing(0.1, TWEEN.Easing.Circular.InOut)));

    var tween = new TWEEN.Tween({x: 0})
                .to({
                    x: 500
                }, 2000)
                .easing(createStepsFunction(3))
                .onUpdate(function(obj) {
                    oMove.style.transform = `translateX(${obj.x}px)`
                })
                .start();
}

//动画函数
function animate() {
    var id = requestAnimationFrame(animate);
    var result = TWEEN.update();
    if(!result) cancelAnimationFrame(id);
}

//十级阶梯缓动函数
function tenStepsEasing(k) {
    return (Math.floor(k * 10) / 10);
}

//创建阶梯函数
function createStepsFunction(numSteps) {
    return function (k) {
        return (Math.floor(k * numSteps) / numSteps);
    }
}

//随机缓动函数
function randomEasing(k) {
    return Math.random();
}

//创建不规则的缓动函数
function createNoisyEasing(randomProportion, easingFunction) {
    var normalProportion = 1 - randomProportion;
    return function(k) {
        return randomProportion * Math.random() + normalProportion * easingFunction(k);
    }
}

init();
animate();